import Link from "next/link";
import Image from "next/image";
import { CategoryItem } from "../../types/video";

export default function VideoCard({ categroy }: { categroy: CategoryItem }) {
  return (
    <Link
      href={`/categories/${categroy.id}`}
      className="group block overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950"
    >
      <div className="relative aspect-video w-full">
        <Image
          src={categroy.coverUrl}
          alt={categroy.name}
          fill
          sizes="(max-width: 768px) 100vw, 33vw"
          className="object-cover"
        />
      </div>
      <div className="space-y-1 p-3">
        <h3 className="line-clamp-2 text-sm font-medium text-zinc-900 group-hover:text-zinc-700 dark:text-zinc-100 dark:group-hover:text-zinc-300">
          {categroy.name}
        </h3>
        <div className="text-xs text-zinc-500 dark:text-zinc-400">{categroy.description}</div>
      </div>
    </Link>
  );
}


